/* eslint-disable semi */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Progress } from 'antd';
import { Statistics } from '@/models/connect';
import styles from './byenergyConsumptionStatistics.css';
import { produce, Draft } from 'immer';
import CommList from './commList';
import { energyConsumptionExport, byenergyConsumptionStatistics } from '@/services/statistics';
import { isMenuVisible } from '@/utils/utils';

interface ByenergyConsumptionStatisticsProps {
  byeStatistics?: Statistics;
  loading: boolean;
}

class ByenergyConsumptionStatistics extends Component<ByenergyConsumptionStatisticsProps> {
  constructor(props: ByenergyConsumptionStatisticsProps) {
    super(props);
    this.state = {
      visible: true,
      drugApi: 'statistics/byenergyConsumptionList',
      detailsUrl: '/statistics/details/byenergyDetails', //跳转路径详情页
      expApi: 'statistics/drugListEx', //导出
      byeStatistics: {},
    };
  }
  data = async () => {
    const [err, data] = await byenergyConsumptionStatistics({
      deviceTypeNo: this.props.deviceTypeNo,
    });
    if (!err) {
      this.setState(
        produce((draft: Draft<ByenergyConsumptionStatistics>): void => {
          draft.byeStatistics = data;
        }),
      );
    }
  };
  componentWillMount() {
    if (localStorage.getItem('isTrue')) {
      this.setState({
        visible: false,
      });
    }
    const { dispatch } = this.props;
    this.data();
    dispatch({
      type: 'statistics/byenergyConsumptionStatistics',
      payload: { deviceTypeNo: this.props.deviceTypeNo },
    });
    localStorage.removeItem('isTrue');
  }
  render() {
    const { byeStatistics = {} } = this.props;
    console.log(this.state.byeStatistics);
    return this.state.visible && isMenuVisible('iot:energyConsumptionLog:statistical') ? (
      <div className={styles['energyTest']}>
        <div className={styles['energyTest-topText']}>
          <i className={styles.topText}>能耗监测信息采集概览</i>
        </div>
        <div className={styles['energyTest-Box']}>
          <div className={styles['energyTest-Box-left']} />
          <div className={styles['energyTest-Box-right']}>
            <div className={styles['energyTest-progress']}>
              <span>信息总数</span>
              <span className={styles['energyTest-progress-total']}>
                {this.state.byeStatistics.everyCount}条
              </span>
              <Progress
                percent={
                  this.state.byeStatistics.everyCount / (this.state.byeStatistics.everyCount / 100)
                }
                showInfo={false}
              />
            </div>
            <div className={styles['energyTest-progress']}>
              <span>今日采集</span>
              <span className={styles['energyTest-progress-total']}>
                {this.state.byeStatistics.dayCount}条
              </span>
              <Progress
                percent={
                  (this.state.byeStatistics.dayCount / this.state.byeStatistics.everyCount) * 100
                }
                showInfo={false}
              />
            </div>
            <div className={styles['energyTest-progress']}>
              <span>近一周采集</span>
              <span className={styles['energyTest-progress-total']}>
                {this.state.byeStatistics.weekCount}条
              </span>
              <Progress
                percent={
                  (this.state.byeStatistics.weekCount / this.state.byeStatistics.everyCount) * 100
                }
                showInfo={false}
              />
            </div>
            <div className={styles['energyTest-progress']}>
              <span>近30天采集</span>
              <span className={styles['energyTest-progress-total']}>
                {this.state.byeStatistics.monthCount}条
              </span>
              <Progress
                percent={
                  (this.state.byeStatistics.monthCount / this.state.byeStatistics.everyCount) * 100
                }
                showInfo={false}
              />
            </div>
          </div>
        </div>
        {isMenuVisible('iot:energyConsumptionLog:list') && (
          <div className={styles['change-box']} onClick={() => this.setState({ visible: false })}>
            <img src={require('@/assets/images/change.png')} alt="" />
          </div>
        )}
      </div>
    ) : (
      <CommList
        drugApi={this.state.drugApi}
        search={'iot:energyConsumptionLog:businessInfo'}
        menuId={'iot:energyConsumptionLog:exportList'}
        deviceTypeNo={this.props.deviceTypeNo}
        detailsUrl={this.state.detailsUrl}
        type={'5'}
        name="能耗监测列表.xlsx"
        expApi={this.state.expApi}
        commListEx={energyConsumptionExport}
      />
    );
  }
}

export default connect(({ loading, statistics }: any) => ({
  loading: loading.effects['statistics/byenergyConsumptionStatistics'],
  byeStatistics: statistics.byeStatistics,
}))(ByenergyConsumptionStatistics);
